<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisble"
    v-dialog-drag
    :close-on-click-modal="false"
    @close="restForm"
    width="800px"
  >
    <div style="display: flex;justify-content: space-between;width: 100%">
      <el-input size="medium" placeholder="请输入内容" v-model="uploadValue">
        <template slot="append">
          <el-button size="medium" @click="handleUploadWorks" v-repeatClick>选择文件..</el-button>
          <el-upload
            v-if="dialogVisble"
            ref="upload"
            class="upload-demo"
            action="#"
            :limit="1"
            style="display: none"
            id="upload"
            name='upload'
            :http-request="handleOnChange"
          >
            <el-button size="medium" v-repeatClick></el-button>
          </el-upload>
        </template>
      </el-input>
      <el-select
        v-if="visibleExceltype"
        size="medium"
        v-model="uploadType"
        placeholder="导出格式"
        clearable
        style="width: 150px;margin-left: 10px"
        @change="handleTypeChange"
      >
        <el-option
          v-for="item in uploadExcelValue"
          :key="item.value"
          :label="item.text"
          :value="item.id"
        >
        </el-option>
      </el-select>
      <el-button v-if="visibleDownload" size="medium" type="primary" v-repeatClick
                 @click="getFilesDownLoad" style="margin-left: 10px">模板文件下载</el-button>
    </div>
    <div style="border: 1px solid #ccc;height:400px;margin-top: 20px;border-radius: 5px;overflow: auto;padding:10px">
      <div style="padding: 5px 5px 0 10px;border-left:5px solid #fff;margin-top:10px" v-for="(item,i) in uploadData" :style="item.level==1?'border-left-color:green':'border-left-color:red'">{{item.message}}</div>
    </div>
  </el-dialog>
</template>

<script>
  import {
    workOrderTemplate
  } from '@/api/business/waybill'

  import { getLog } from '@/api/common'
  export default {
    name: 'uploadExcel',
    props:['visible','uploadFun','downFun','title','uploadExcelValue','visibleDownload','visibleExceltype','templateFileType','isDownload'],
    data(){
      return {
        uploadValue:'',
        uploadData:[],
        dialogVisble:false,
        uploadType:'',
        socketIns:null,
        uploadFile:null
      }
    },
    methods:{
      restForm(){
        this.uploadData = []
        this.uploadType = ''
        this.uploadValue = ''
        this.uploadFile = null
        this.$emit('update:visible',false)
        if(this.socketIns){
          this.socketIns.close()
          this.socketIns = null
        }
      },
      //点击上传按钮
      handleUploadWorks(){
        document.querySelectorAll("#upload button")[0].click()
      },
      //类型改变
      handleTypeChange(){
        if(this.uploadFile){
          this.handleOnChange(this.uploadFile)
        }
      },
      //上传
      handleOnChange(file,files){
        if(file.file){ //如果是文件
          this.uploadFile = file
        }
        let form = new FormData()
        if(file.file){
          form.append('excelFile',file.file)
          this.uploadValue = file.file.name
        }else{
          form.append('excelFile',this.uploadFile.file)
          this.uploadValue = this.uploadFile.file.name
        }


        if (!this.isDownload){
          if(!this.uploadType){
            this.$message.error('请先选择导出格式')
            return;
          }
          this.uploadData = [{
            level:1,
            message:"文件正在上传..."
          }]
          this.postDownload(this.uploadFun(this.uploadType),form).then(resp=>{
            this.uploadData.push(
              {
                level:'1',
                message:'文件上传完毕',
              }
            )
          }).catch(e=>{
            this.uploadValue = ''
            this.uploadData.push(
              {
                level:'2',
                message:e.msg,
              },{
                level:'2',
                message:'批量操作完毕！',
              },
            )
          }).finally(()=>{
            this.$refs.upload.uploadFiles = []
          })
        }else{
          this.uploadData = [{
            level:1,
            message:"文件正在上传..."
          }]
          this.uploadFun(form).then(resp=>{
            this.uploadData.push({
              level:'1',
              message:'文件上传完毕',
            })
            if(this.title === '根据单号打印运单'){
              this.$emit('printOrder',resp.data,this.uploadType)
            }
          }).catch(e=>{
            this.uploadValue = ''
            this.uploadData.push(
              {
                level:'2',
                message:e.msg,
              },{
                level:'2',
                message:'批量操作完毕！',
              },
            )
          }).finally(()=>{
            this.$refs.upload.uploadFiles = []
          })
        }
      },
      //下载模板
      getFilesDownLoad() {
        this.postDownload(workOrderTemplate(this.templateFileType),{},'get')
      },
    },
    watch:{
      visible(){
        this.dialogVisble = this.visible
        if(this.dialogVisble){
          console.log('打开链接')
          if(this.title === '批量添加修改运单' || this.title === '批量修改状态与分批' || this.title === '匹配身份证'  || this.title === '根据单号导出身份证' || this.title === '根据单号导出运单'){
            this.socketIns = new WebSocket(getLog())
            this.socketIns.onmessage = (ev)=>{
              this.uploadData.push(JSON.parse(ev.data))
            }
          }
        }
      },
    }
  }
</script>

<style scoped>

</style>
